<template>
    <view class="disaster-type-selector">
        <view class="section-title">灾害类型</view>
        <view class="disaster-types">
            <view 
                v-for="type in disasterTypes" 
                :key="type.value"
                class="disaster-type-item"
                :class="{ active: modelValue === type.value }"
                @click="handleSelect(type.value)"
            >
                <image 
                    :src="modelValue === type.value ? type.activeIcon : type.inactiveIcon" 
                    class="disaster-icon" 
                    mode="aspectFit"
                ></image>
                <text class="disaster-name">{{ type.label }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'DisasterTypeSelector',
    props: {
        modelValue: {
            type: String,
            default: ''
        }
    },
    emits: ['update:modelValue'],
    data() {
        return {
            disasterTypes: [
                {
                    value: '0',
                    label: '高温',
                    activeIcon: '/static/images/high-temperature-active.png',
                    inactiveIcon: '/static/images/high-temperature.png'
                },
                {
                    value: '1',
                    label: '寒潮',
                    activeIcon: '/static/images/cold-wave-active.png',
                    inactiveIcon: '/static/images/cold-wave.png'
                },
                {
                    value: '2',
                    label: '暴雨',
                    activeIcon: '/static/images/heavy-rain-active.png',
                    inactiveIcon: '/static/images/heavy-rain.png'
                },
                {
                    value: '3',
                    label: '干旱',
                    activeIcon: '/static/images/drought-active.png',
                    inactiveIcon: '/static/images/drought.png'
                },
                {
                    value: '4',
                    label: '大风',
                    activeIcon: '/static/images/strong-wind-active.png',
                    inactiveIcon: '/static/images/strong-wind.png'
                }
            ]
        }
    },
    methods: {
        handleSelect(value) {
            this.$emit('update:modelValue', value)
        }
    }
}
</script>

<style lang="scss">
.disaster-type-selector {
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .section-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 20rpx;
    }

    .disaster-types {
        display: flex;
        gap: 20rpx;
        justify-content: space-between;

        .disaster-type-item {
            width: 140rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20rpx;
            border-radius: 12rpx;
            transition: all 0.3s;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 12rpx;
            color: #999999;

            &.active {

                .disaster-name {
                    // color: #FF0004;
                }
            }

            .disaster-icon {
                width: 80rpx;
                height: 80rpx;
                margin-bottom: 10rpx;
            }

            .disaster-name {
                font-size: 28rpx;
                color: #666;
            }
        }
    }
}
</style> 